import React, { useEffect, useState } from "react";
import Button from '@knownsec/react-component/dist/Button';
import { Radio, Checkbox } from 'antd';
import ConfirmBase from "../ConfirmBase";
import fetch from 'API/fetch'
import s from './style.module.css'
import cn from 'classnames'
import Message from "@knownsec/react-component/dist/Message";

const ignoreResonList = [
	{ label: '暂不关注', value: '1' },
	{ label: '误报', value: '2' },
	{ label: '其他', value: '3' },
]

const ignoreChangeType = [
	{ label: '文本变更', value: 'text' },
	{ label: '结构变更', value: 'structure' },
	{ label: '资源变更', value: 'resource' },
];


const formatManySeletedChangeTypes = (warningData, warningIds) => {
	let allTypes = []
	const _types = warningData.reduce((arr, item) => {
		if (warningIds.includes(item._id)) {
			allTypes = allTypes.concat(Object.keys(item.detail));
		}
		return arr
	}, []);
	return Array.from(new Set(allTypes))
}


const IgnoreRiskConfirm = ({
	 className,
	 data: { task_id, warning_ids },
	 refresh,
	 text,
	 isChangeType = false, // 篡改监测新增结构
	 changeTypes = ['text','structure','resource'], // 篡改监测新增结构
	 warningData = [], // 篡改监测新增结构
	 ...props
}) => {
	const [ignoreReason, setIgnoreReason] = useState('1')

	const getChangeTypes = () => {
		if (warningData.length > 0 && warning_ids.length > 0) {
			return formatManySeletedChangeTypes(warningData, warning_ids);
		}
		return changeTypes
	}
	const defaultChangeTypes = getChangeTypes()

	let confirmData = {
		types: defaultChangeTypes,
		reason: "1",
	};

	const ignoreMethod = () => {
		const ConfirmText = function ([cusData, setCusData]) {
			return <div className="mt30">
				<p>忽略后，该任务监测结果将变更，ScanV将不再监测所选风险地址已忽略威胁，下一任务生效。</p>
				{isChangeType && (
					<div className={cn("mt10 df aic", s.required)}>
						忽略的变更类型：
						<Checkbox.Group
							className='ml10'
							options={ignoreChangeType}
							defaultValue={defaultChangeTypes}
							onChange={newValue => confirmData.types=newValue}
						/>
					</div>)
				}
				<div className={cn("mt10 df aic", s.required)}>
					忽略原因：
					<Radio.Group
						className='ml10'
						defaultValue={ignoreResonList[0].value}
						onChange={(e) => {confirmData.reason=e.target.value}}
						options={ignoreResonList}
					/>
				</div>
			</div>
		}
		const onConfirm = (callback, cusData) => {
			fetch('/api/v2/tasks/warning/ignore', {
				method: 'POST',
				body: JSON.stringify({
					task_id,
					warning_ids,
					types: confirmData.types,
					reason: confirmData.reason
				})
			}).then(res => {
				if (res.code === 200) {
					Message.show({ type: 'success', message: '操作成功，您可前往综合管理查看已忽略威胁。' })
					refresh(true)
				}
			}).catch(err => {
				console.log(err)
				Message.show({ type: 'error', message: '操作失败' })
			}).finally(() => {
				setIgnoreReason('1')
				callback()
			})
		}
		ConfirmBase({
			className: 'w500',
			message: {
				icon: 'error',
				cusData: { },
				text: ConfirmText
			},
			onConfirm: onConfirm,
			oncancel: () => setIgnoreReason('1')
		})
	};
	return <div className={cn('dib', className)}>
		{text === '批量忽略' && warning_ids?.length > 0 && <div className="warning-color fs12">
			当前已选择 <span className="main-color">{warning_ids?.length || 0}</span> 个威胁
		</div>}
		<Button className={cn('p0', s.btn)} {...props} type='text' onClick={() => ignoreMethod()}>
			{text || '忽略'}
		</Button>
	</div>
}

export default IgnoreRiskConfirm
